<template>
  <view class="container">
	<view class="list-area">
		<view class="list-cell" hover-class="cell-hover" @click="phoneShow=true" :hover-stay-time="50">
		  <text class="cell-tit">手机号码</text>
		  <text class="cell-tip">{{userInfo.phone||'未绑定'}}</text>
		</view>
		<view class="list-cell" @click="nameShow=true" hover-class="cell-hover" :hover-stay-time="50">
		  <text class="cell-tit">昵称</text>
		  <text class="cell-tip">{{userInfo.nickname ||'未设置'}}</text>
		  <text class="cell-more yticon icon-you"></text>
		</view>
		
		<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" style="position: relative;">
		  <view style="position: absolute;right: 0;height: 100%;background-color: #000000;z-index: 999;opacity: 0;">
		    <u-upload :max-count="1" @on-success="updateimage" :action="action" :form-data="formData" :deletable="false"
		      :auto-upload="true"> </u-upload>
		  </view>
		  <text class="cell-tit">头像</text>
		  <!-- <text class="cell-tip"> -->
		  <image class="cell-tip portrait" :src="userInfo.icon || '/static/missing-face.png'"></image>
		
		  <!-- </text> -->
		  <text class="cell-more yticon icon-you"></text>
		</view>
	</view>
    
	<u-popup v-model="phoneShow" mode="bottom" border-radius="15" :closeable="true">
	  <view style="width: calc(100vw - 68rpx);padding: 40rpx 34rpx 0;height: calc(95vh - 40rpx);">
	    <view>
	      <view style="font-size: 36rpx;color: #111;">修改手机号</view>
	      <view style="margin-top: 72rpx;padding-bottom: 18rpx;border-bottom: 1rpx solid #EBECF0;">
	        <u-input v-model="phone" placeholder="请输入手机号" type="number" />
	      </view>
	    </view>
	    <view style="margin-top: 64rpx;">
	      <u-button type="success" @click="setPhone()" shape="circle">确定</u-button>
	    </view>
	  </view>
	</u-popup>
	<u-popup v-model="nameShow" mode="bottom" border-radius="15" :closeable="true">
	  <view style="width: calc(100vw - 68rpx);padding: 40rpx 34rpx 0;height: calc(95vh - 40rpx);">
	    <view>
	      <view style="font-size: 36rpx;color: #111;">修改姓名</view>
	      <view style="margin-top: 72rpx;padding-bottom: 18rpx;border-bottom: 1rpx solid #EBECF0;">
	        <u-input v-model="nickname" type="text" maxlength="10" placeholder="请输入新名称（4-10个字符）" />
	      </view>
	    </view>
	    <view style="margin-top: 64rpx;">
	      <u-button type="success" @click="setUser('nickname')" shape="circle">保存</u-button>
	    </view>
	  </view>
	</u-popup>
    <u-popup v-model="imageShow" mode="center" border-radius="15">
      <view style="width: 500rpx;padding: 50rpx;">
        <view style="display: flex;justify-content: center;align-items: center;">
          <view>头像：</view>
        </view>
        <!-- 		<view style="display: flex;margin-top: 20rpx;">
					<u-button @click="imageShow=false;">取消</u-button>
					<u-button type="success" @click="updateimage">确定</u-button>
				</view> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    data() {
      return {
        nameShow: false,
        nickname: '',
        phoneShow: false,
        phone: '',
        imageShow: false,
      };
    },
    computed: {
      ...mapState(['hasLogin', 'userInfo']),
      formData() {
        return {
          id: this.userInfo.id,
          url: this.$store.state.apiBaseUrl + "static/image/"
        }
      },
      action() {
        return this.$store.state.apiBaseUrl + "user/image";
      }
    },
    watch: {
      imageShow(newValue, oldValue) {
        this.$api.request.userInfo({}, res => {
          if (res.code == 200) {
            this.$store.commit("login", res.data);
          }
        })
      }
    },
    methods: {

      successBtn(e) {
        console.log(e);
      },
      setPhone() {
        if (!this.$api.util.validateMobileNo(this.phone)) {
          this.$api.msg('手机号码格式错误');
        } else {
          this.$api.request.setPhone({
            phone: this.phone,
            id: this.userInfo.id
          }, res => {
            this.$api.msg("修改成功")
            uni.setStorageSync("isphone", true)
            this.$store.state.userInfo.phone = this.phone
            setTimeout(res => {
              this.isphone = false
            }, 500)
          })
        }
      },
      setUser(type) {
        // console.log(this.userInfo);
        this.$api.request.setUser({
          id: this.userInfo.id,
          nickname: this.nickname,
          type: "nickname"
        }, res => {
          this.userInfo.nickname = this.nickname
          this.nameShow = false
          this.nickname = ''
          this.$api.msg("修改昵称成功！")
        })


      },
      //switch
      switchChange(e) {
        let statusTip = e.detail.value ? '打开' : '关闭';
        this.$api.msg(`${statusTip}消息推送`);
      },
      updateimage(e, index, lists, name) {
        this.$store.state.userInfo.icon = e.data;
        uni.switchTab({
          url: "/pages/sys/user/index"
        })
      }
    }
  }
</script>

<style lang='scss'>
  page {
    background: $page-color-base;
  }
  .list-area{
  	background: #fff;
  	border-radius: 0 0 24rpx 24rpx;
  	box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.04);
  	padding: 0 24rpx 24rpx;
  }
  .portrait {
    width: 60upx;
    height: 60upx;
    align-self: center;
  }

  .list-cell {
    display: flex;
    align-items: baseline;
    padding: 30rpx 0;
    position: relative;
    background: #fff;
    justify-content: center;
	border-bottom: 1rpx solid #EBECF0;
    &.log-out-btn {
      margin-top: 40upx;

      .cell-tit {
        color: $uni-color-primary;
        text-align: center;
        margin-right: 0;
      }
    }

    &.cell-hover {
      background: #fafafa;
    }

    &.b-b:after {
      left: 30upx;
    }

    &.m-t {
      margin-top: 16upx;
    }

    .cell-more {
      align-self: baseline;
      font-size: $font-lg;
      color: $font-color-light;
      margin-left: 10upx;
    }

    .cell-tit {
      flex: 1;
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      margin-right: 10upx;
    }

    .cell-tip {
      font-size: $font-base;
      color: $font-color-light;
    }

    switch {
      transform: translateX(16upx) scale(.84);
    }
  }
</style>
